<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">>
<head>
<meta charset="utf-8">
	<title>留言板</title>
	<link href="/static/img/logo500x500.png" rel="shortcut icon" sizes="500x500">
    	<link rel="stylesheet" type="text/css" href="/static/liuyan/css/qqZone.css">
		<style>
			#editor{
				color: black;
			}

		</style>

	<script type="text/javascript" src="/static/js/wangEditor.js"></script>
</head>
<body>

    <!-- 下面实现留言板功能 -->
    <div class="mainframe">
    	<div class="title">留言板</div>

		<span th:if="${isChat}">
			<input id="profill" th:value="${userInf.profill}" type="hidden">
			<input id="name" th:value="${userInf.name}" type="hidden">
			<input id="toUserId" th:value="${toUserId}" type="hidden">
			<div id="editor"></div>
		<script type="text/javascript">
			const E = window.wangEditor
			const editor = new E('#editor')
			editor.config.height = 300;
			editor.config.width = document.body.clientWidth*0.8;
			editor.create()
		</script>
    	<input type="button" name="submit" value="发表" class="subbtn">
		</span>

    	<div class="numofmessage" th:text="'留言('+${messagesList.size()}+')'"></div>
    	<!-- 下面是留言区 -->
    	<div class="msgFrame">
    	   <div class="content_1" th:each="message:${messagesList}">
    	         <img class="name" th:src="${message.getUserImageUrl()}" alt="photo">
    	         <div class="mainInfo">
    		         <div class="userId"><a target="_blank" th:href="'/user/liuyan?userId='+${message.getUserId()}" th:text="${message.getUserName()}"></a></div>
    		         <div class="conInfo" th:utext="${message.getContent()}"></div>
					 <div class="time" th:text="${message.getCreateDate()}"></div>
    		    </div>

    	    </div>
         </div>
    </div>
</body>
<script type="text/javascript" src="/static/liuyan/js/jquery.js"></script>
<script type="text/javascript">
   $(".zoneName").hover(function(){
   	   $(".edit").show();
   },function(){
   	   $(".edit").delay(500).hide(0);//延时执行
   })
   //鼠标响应事件
   $(".support").mouseover(function(e){
   	   var left=e.pageX;
   	   var top=e.pageY;
   	   top=top-41;//这里是因为这个元素的父元素使用了margin-top属性，使得top值偏移了41像素。
   	   top=top+25;//加上鼠标自己的高度
   	   console.log(left+"px"+"   top:"+top)
   	   $(".tips").css({"left":left+"px","top":top+"px"});
   	   // $(".tips").delay(800).show(0);加了延时执行后会使得鼠标响应事件不灵敏
   	   // $(".tips").show("slow");
   	   $(".tips").fadeIn();
   })
   /*
    *鼠标离开事件，其中leave是指离开当前元素，而out包括其子元素
   */
   // $(".support").mouseout(function(){
   // 	   $(".tips").hide();
   // })
   $(".support").mouseleave(function(){
   	   console.log("leave");
   	   // $(".tips").css("display","none");
   	   // $(".tips").hide("slow");
   	    $(".tips").fadeOut();
   })
   //修改头像
   $(".photo").hover(function(){
   	   $(".uploadphoto").delay(800).show(0);
   },function(){
   	   $(".uploadphoto").hide();
   }) 
   $(".uploadphoto").hover(function(){
   	   if ($(this).is(":visible")) {
          console.log("visible")
   	   }
   	   else
   	   $(".uploadphoto").show();
   })
   //创建一个div
    function creatDiv(className,closeName,left,top){
          var div =$('<div style="left:' + left + 'px; top:' + top + 'px;"></div>');     
          div.addClass(className);
          $('body').append(div);
          left+=360;
          var close=$('<div style="left:' + left + 'px; top:' + top + 'px;"></div>'); 
          close.addClass(closeName);
          $('body').append(close);
      }     
   $(".uploadphoto").click(function(){
   	   var className='dialog';
   	   var closeName="close";
   	   console.log("点击上传");
   	   creatDiv(className,closeName,500,200);   
   	   $(".close").bind("click",function(){
   	   	      	  $(".dialog").remove();
   	              $(".close").remove();
   	              console.log("关闭成功");
   	              $(".uploadphoto").hide();
   	   });
   })
   //下面是错误的尝试，直接绑定一个函数名称可能导致该函数直接执行！
   // $(".close").bind("click",closeDialog());
   // function closeDialog(){
   // 	  $(".dialog").remove();
   // 	  $(".close").remove();
   // 	  console.log("关闭");
   // }


   //接下来使用数据库储存留言数据
   var count=0;
   $(".subbtn").click(function(){
   	 var text= editor.txt.html();
   	 var time=getCurrentTime();
   	 var name=$('#name').val();
   	 var toUserId=$('#toUserId').val();
   	 var profill=$('#profill').val();
   	 if(text==""){
   	 	alert("您还没有输入任何内容！");
   	 }
   	 else{
   	 	loadmessage(text,name,time);
   	 	count++;
   	 	console.log('success!');
   	 	$(".content").text("");
   	 	$(".numofmessage").text("留言("+count+")");
         $.ajax({
             url:'/doLiuYan',
             type:'POST',
             dataType:'json',
             data:{toUserId:toUserId,content:text},
             success:function(data){
                 location.reload();
             },
             error:function(status){
                 //失败后执行的代码
             }
         });

     }
   })
   function loadmessage(message,id,time){
	   location.reload();
   }
   function getCurrentTime(){
   	   var today=new Date();
   	   var y=today.getFullYear();
   	   var mh=today.getMonth();
   	   mh++;
   	   var d=today.getDate();
   	   var h=today.getHours();
   	   var m=today.getMinutes();
   	   var s=today.getSeconds();
   	   m=checkTime(m)
       s=checkTime(s)
       var time=y+"-"+mh+"-"+d+"  "+h+":"+m+":"+s;
       return time;
   }
   function checkTime(i){
       if(i<10)
         i="0"+i
       return i
    }

</script>
</html>